<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style type="text/css">
        body {
            text-align: center;
            padding-top: 20px;
        }
        canvas {
            box-shadow: 0 0 10px #333;
            margin: 0 auto;
        }
    </style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600">
    你的浏览器太 low 了，请更新~!
</canvas>

<script>
    function draw() {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');

            /**
             * 径向渐变
             * 参数1：x1轴    参数1和参数2代表第一个圆的圆心
             * 参数2：y1轴
             * 参数3：r1半径
             * 参数4：x2轴    参数4和参数5代表第二个圆的圆心
             * 参数5：y2轴
             * 参熟6：r2半径
             */
            var radgrad = ctx.createRadialGradient(45, 45, 10, 50, 50, 30);
            radgrad.addColorStop(0, '#A7D30C');
            radgrad.addColorStop(0.9, '#019F62');
            radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');

            ctx.fillStyle = radgrad;
            ctx.fillRect(0, 0, 150, 150);

            var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
            radgrad2.addColorStop(0, '#FF5F98');
            radgrad2.addColorStop(0.9, '#FF0188');
            radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');

            ctx.fillStyle = radgrad2;
            ctx.fillRect(0, 0, 250, 250);
        }
    }
</script>
</body>
</html>
